<template>
	<view class="busines-mod-list-top" v-if="listData.length">
		<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false"
			:scroll-into-view="scrollId">
			<view v-for="(tab,index) in listData" :key="index" class="uni-tab-item" :id="index" :data-current="tab"
				@click="clickLeftItem(index)">
				<text class="uni-tab-item-title" :class="tabIndex== index ? 'uni-tab-item-title-active' : ''">{{tab.nf}}年</text>
			</view>
		</scroll-view>
	</view>
	<view class="busines-mod-list" v-if="listData.length">
		<scroll-view scroll-y="true" :scroll-into-view="scrollId" scroll-with-animation @scroll="scrollEvt">
			<view class="list-item" v-for="(item,index) in listData" :key="item.nf" :id="'item'+index">
				<uni-section :title="item.nf+ '年'" :sub-title="'小计：' + moneyUtils(item.totalAmount)" type="line"
					style="background: #efeff4;" />
				<view v-for="itm in item.children" :key="itm.id">
					<uni-card padding="0" spacing="0" margin="6" :is-shadow="false">
						<uni-list :border="false">
							<uni-list-item :title="'缴费渠道：'+ itm.jfqd" :rightText="moneyUtils(itm.jfje)" />
							<uni-list-item title="缴费时间：" :rightText="itm.ywsj" />
							<uni-list-item title="缴费结果：">
								<template v-slot:footer>
									<text :class="{'color-danger': item.jfzt == '作废'}">{{itm.jfzt}}</text>
								</template>
							</uni-list-item>
						</uni-list>
					</uni-card>
				</view>

			</view>
		</scroll-view>
	</view>
<cNoData v-if="listData.length < 1" />
</template>

<script setup lang="ts">
	import cNoData from "@/pages/bspsd/components/no-data.vue";;
	import { getJgbm } from "@/utils/storage";
	import { getJfjl } from "@/api/request/getJfjl";
	import { moneyUtils } from "@/utils/index";
	import { onBeforeMount, ref, watch } from 'vue';
	const props = defineProps({
		yhbh: {
			type: String,
			default: ""
		}
	})
	let tabIndex = ref(0)
	let scrollId = ref("")
	let distanceList = ref([])
	let timer = ref(null)
	let isLeftClick = ref(false)
	let listData = ref([]);

	onBeforeMount(() => {
		getListData()
	})
	watch(() => props.yhbh, ()=>{
		getListData()
	})
	
	function getListData() {
		getJfjl( {
			data: {
				yhbh: props.yhbh,
				jgbm: getJgbm(),
			},
			success: (res) => {
				let listArr = res || []
				listData.value = listArr.reduce((result, item) => {
					let index = result.findIndex((it) => it.nf == item.nf);
					if (index == -1) {
						let totalAmount = 0
						if (item.jfzt != '作废') {
							totalAmount = parseFloat(item.jfje);
						}
						result.push({
							nf: item.nf,
							totalAmount: totalAmount,
							children: [item],

						});
					} else {
						if (item.jfzt != '作废') {
							result[index].totalAmount = + parseFloat(item.jfje);
						}
						result[index].children.push(item);
					}
					return result;
				}, []);
			},
			fail: (code, message) => {
				console.log(code, message)
			}
		})
	}

	setTimeout(() => {
		getDistanceToTop();
	}, 500)

	function clickLeftItem(index : number) {
		isLeftClick.value = true
		tabIndex.value = index
		scrollId.value = 'item' + index
	}
	function getDistanceToTop() { //获取右侧各部分距离顶部的距离
		let selectorQuery = uni.createSelectorQuery()
		selectorQuery.selectAll('.list-item').boundingClientRect(function (rects) {
			rects.forEach(function (rect) {
				distanceList.value.push(rect.top)
			})
		}).exec()
	}

	// 元素滚动到顶部时，对应的 导航栏变为选中状态
	function scrollEvt(e) {
		// 点击导航栏引起的滚动不做判断
		if (isLeftClick.value) {
			isLeftClick.value = false
			return
		}
		// 防抖
		if (timer.value) {
			clearTimeout(timer.value)
		}
		timer.value = setTimeout(() => {
			let scrollTop = e.detail.scrollTop //滚动的高度
			// 找到位于顶部元素的索引，距离大于滚动高度的第一个元素的上一个元素就是此时位于顶部的元素
			let index = distanceList.value.findIndex(it => {
				// 滚动条的位置大于元素距离顶部位置的距离时，说明元素已经滑过了顶部
				return (it > scrollTop)
			}) - 1
			if (index == tabIndex.value) return
			tabIndex.value = index
		}, 200)
	}
</script>
<style lang="scss" scoped>
	.list-item {
		line-height: 1.5;
		font-size: 22rpx;
		color: #969799;

		.text-left-right {
			line-height: 2;
			font-size: 28rpx;
		}
	}

	.color-danger {
		color: #ff4a4a;
	}
</style>